<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!--iPhone私有标签，它表示：允许全屏模式浏览-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <!--iPhone私有标签，它指定的iPhone中safari顶端的状态条的样式-->
    <meta name="format-detection" content="telephone=no; email=no" />
    <!--不识别邮件和不把数字识别为电话号码-->
    <link rel="stylesheet" href="./css/front-less/common.css" />
    <link rel="stylesheet" href="./css/front-less/live-program.css" />
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./lib/layui/css/layui.css">
    <script src="./node_modules/jquery/dist/jquery.js"></script>
    <title>课程直播</title>
</head>
<body>
<!--导航模块-->
<div class="container-layout" id="container-main">
    <div class="layui-row">
        <div class="header">
            <div class="header-left layui-col-lg9 layui-col-md9">
                <div class="header-l-left">
                    <h3 class="live-curse-name">甄妮：电商banner设计班</h3>
                    <a href="javascript:;" class="curse-list-title">课程目录 <span class="layui-icon layui-icon-down"></span></a>
                </div>
                <div class="header-l-center">
                    <ul class="video-fun-list">
                        <li class="fun-item"><span class="icon"></span>咨询</li>
                        <li class="fun-item"><span class="icon"></span>收藏</li>
                        <li class="fun-item"><span class="icon"></span>分享</li>
                        <li class="fun-item"><span class="icon"></span>举报</li>
                    </ul>
                </div>
            </div>
            <div class="header-right layui-col-lg3 layui-col-md3">
                <div class="location-box">
                    <div class="class-cate">
                        <span class="class-logo"></span>
                        班级
                    </div>
                    <div class="class-cate">
                        <span class="class-logo"></span>
                        作业
                    </div>
                </div>
            </div>

        </div>
        <div class="main">
            <div class="main-left layui-col-lg9 layui-col-md9">
                <div class="curse-list layui-col-lg3 layui-col-md3">
                    <dl class="cate-detail">
                        <dt><span>01</span>图标绘制</dt>
                        <dd>
                            <span class="icon-play"></span>
                            <div class="class-msg">
                                <p class="class-title">有趣的图标变化史</p>
                                <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                            </div>
                            <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                        </dd>
                        <dd>
                            <span class="icon-play"></span>
                            <div class="class-msg">
                                <p class="class-title">有趣的图标变化史</p>
                                <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                            </div>
                            <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                        </dd>
                        <dt><span>01</span>图标绘制</dt>
                        <dd class="active">
                            <span class="icon-play"></span>
                            <div class="class-msg">
                                <p class="class-title">有趣的图标变化史</p>
                                <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                            </div>
                            <a href="javascript:;" class="study-free-btn layui-btn">正在试学</a>
                        </dd>
                        <dd>
                            <span class="icon-play"></span>
                            <div class="class-msg">
                                <p class="class-title">有趣的图标变化史</p>
                                <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                            </div>
                            <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                        </dd>
                        <dt><span>01</span>图标绘制</dt>
                        <dd>
                            <span class="icon-play"></span>
                            <div class="class-msg">
                                <p class="class-title">有趣的图标变化史</p>
                                <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                            </div>
                            <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                        </dd>
                        <dd>
                            <span class="icon-play"></span>
                            <div class="class-msg">
                                <p class="class-title">有趣的图标变化史</p>
                                <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                            </div>
                            <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                        </dd>
                        <dt><span>01</span>图标绘制</dt>
                        <dd>
                            <span class="icon-play"></span>
                            <div class="class-msg">
                                <p class="class-title">有趣的图标变化史</p>
                                <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                            </div>
                            <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                        </dd>
                        <dd>
                            <span class="icon-play"></span>
                            <div class="class-msg">
                                <p class="class-title">有趣的图标变化史</p>
                                <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                            </div>
                            <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                        </dd>
                        <dt><span>01</span>图标绘制</dt>
                        <dd>
                            <span class="icon-play"></span>
                            <div class="class-msg">
                                <p class="class-title">有趣的图标变化史</p>
                                <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                            </div>
                            <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                        </dd>
                        <dd>
                            <span class="icon-play"></span>
                            <div class="class-msg">
                                <p class="class-title">有趣的图标变化史</p>
                                <p class="class-date">10-07&nbsp10:30-10:45已结束</p>
                            </div>
                            <a href="javascript:;" class="study-free-btn layui-btn">免费试学</a>
                        </dd>
                    </dl>
                </div>
                <video src="./images/videos/movie.mp4" autoplay controlsList="nodownload" id="live-program">
                    <source src="./images/videos/movie.mp4"/>
                    <source src="./images/videos/movie.ogg"/>
                    <source src="./images/videos/movie.webm"/>
                </video>
                <div class="control-box">
                    <a href="javascript:;" class="layui-icon layui-icon-play"></a>
                    <a href="javascript:;" class="layui-icon full-video"></a>
                    <a href="javascript:;" class="layui-icon layui-icon-voice"></a>
                </div>
            </div>
            <div class="main-right layui-col-lg3 layui-col-md3">
                <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
                    <ul class="layui-tab-title">
                        <li class="layui-this">讨论区</li>
                        <li>成员（34）</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item chat-part layui-show">
                            <div class="chat-area">
                                <div class="send-time-m">
                                    <span class="send-time-d">14:10</span>
                                </div>
                                <div class="l-send msg-style">
                                    <a href="./student-page.html" class="s-header">
                                        <img src="" alt="">
                                    </a>
                                    <div class="msg-con">
                                        <p class="obj-name-con">大林</p>
                                        <div class="msg-con-d">怎么加好友</div>
                                    </div>
                                </div>
                                <div class="r-send msg-style">
                                    <a href="./student-page.html" class="s-header">
                                        <img src="" alt="">
                                    </a>
                                    <div class="msg-con">
                                        <p class="obj-name-con">大林</p>
                                        <div class="msg-con-d">怎么加好友</div>
                                    </div>
                                </div>
                                <div class="send-time-m">
                                    <span class="send-time-d">欢迎小林进入直播间</span>
                                </div>
                                <div class="send-body">
                                    “小林”送给“甄妮”老师 <span class="gif-logo"></span>
                                </div>
                            </div>
                            <div class="send-area">
                                <textarea class="layui-textarea" id="edit-msg" style="display: none;"></textarea>
                                <span class="send-flower"></span>
                                <span class="shield"></span>
                                <a href="javascript:;" class="layui-btn send-btn">发送</a>
                            </div>
                        </div>
                        <div class="layui-tab-item member-list">
                            <ul class="members">
                                <li class="member">
                                    <a href="./teacher-page.html" class="member-box">
                                        <img src="" alt="" class="member-header">
                                        <span class="iden-mst iden-style">教师</span>
                                        <p class="member-name">大林</p>
                                    </a>
                                </li>
                                <li class="member">
                                    <a href="./teacher-page.html" class="member-box">
                                        <img src="" alt="" class="member-header">
                                        <span class="iden-mag iden-style">管理</span>
                                        <p class="member-name">大林</p>
                                    </a>
                                </li>
                                <li class="member">
                                    <a href="./teacher-page.html" class="member-box">
                                        <img src="" alt="" class="member-header">
                                        <span class="iden-help iden-style">助教</span>
                                        <p class="member-name">大林</p>
                                    </a>
                                </li>
                                <li class="member">
                                    <a href="./teacher-page.html" class="member-box">
                                        <img src="" alt="" class="member-header">
                                        <p class="member-name">大林</p>
                                    </a>
                                </li>
                                <li class="member">
                                    <a href="./teacher-page.html" class="member-box">
                                        <img src="" alt="" class="member-header">
                                        <p class="member-name">大林</p>
                                    </a>
                                </li>
                                <li class="member">
                                    <a href="./teacher-page.html" class="member-box">
                                        <img src="" alt="" class="member-header">
                                        <p class="member-name">大林</p>
                                    </a>
                                </li>
                                <li class="member">
                                    <a href="./teacher-page.html" class="member-box">
                                        <img src="" alt="" class="member-header">
                                        <p class="member-name">大林</p>
                                    </a>
                                </li>
                                <li class="member">
                                    <a href="./teacher-page.html" class="member-box">
                                        <img src="" alt="" class="member-header">
                                        <p class="member-name">大林</p>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div id="curse-fun" class="curse-fun" style="display:none">
    <div class="full-shade"></div>
    <div class="get-ticket hide-style">
        <div class="hide-d-style">
            <h3 class="curse-title">请购买课程后学习完整内容</h3>
            <em class="layui-icon layui-icon-close"></em>
            <p class="curse-name-h">《电商banner设计进阶班》</p>
            <p class="curse-price">￥1300.00</p>
            <div class="buy-box">
                <a href="javascript:;" class="layui-btn buy-now">立即购买</a>
                <a href="javascript:;" class="layui-btn online-consult">在线咨询</a>
            </div>

        </div>
    </div>
</div>
<script src="./js/assets/less.min.js"></script>
<script src="./lib/layui/layui.js"></script>
<script src="./js/front-js/common.js"></script>
<script src="./js/front-js/live-program.js"></script>
</body>
</html>